<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="avatorWrapper">
				<view class="avator">
					<image class="img" src="../../static/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="form">
				<view class="inputWrapper">
					<input class="input" v-model="username" type="text" value="" placeholder="请输入用户名" />
				</view>
				<view class="inputWrapper">
					<input class="input" v-model="password" type="password" value="" placeholder="请输入密码" />
				</view>
				<view class="inputWrapper">
					<input class="input" v-model="valcode" type="text" value="" placeholder="请输入验证码" />
					<img :src="valcodeImg" style="margin-top: 20rpx;" @click="fChange" />
				</view>
			</view>
			<button form-type="submit" class="loginBtn">确认登录</button>
		</form>

		<button @click="fTest" class="loginBtn">测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: "",
				valcode: "",
				opid:"1123",
				pass:"8888",
				valcodeImg: "http://www.lgsm.com.cn/fser/images/captcha"
			}
		},
		onLoad() {
			this.f_initWx()
		},
		methods: {
			/**发布提交 */
			formSubmit(e) {
				let self = this
				this.$myRequest({
						url: '/login',
						method: 'POST',
						data: {
							userName: self.username,
							passWord: self.password,
							valCode: self.valcode
						}
					})
					.then((res) => {
						let {
							db1
						} = res.data
						console.log(res.data)
					})
			},

			fChange() {
				this.valcodeImg = this.valcodeImg + "?date=" + new Date;
			},

			fTest() {
				let self = this
				this.$myRequest({
						url: '/com',
						method: 'POST',
						data: {
							CMD: 'ZB',
							DOTYPE: 'INSERT_MENU1',
							PASSWORD: self.password,
							VALCODE: self.valcode
						}
					})
					.then((res) => {
						// let {
						// 	db1
						// } = res.data						
					})
			},

			f_initWx() {
				let params = new URLSearchParams();
				params.append('URL', location.href.split('#')[0]);
				
				this.$myRequest({
						url: '/wxjsapi',
						method: 'POST',
						data: params
					})
					.then((data) => {
						// let {
						// 	db1
						// } = res.data						
					})

				WxJsapi(params)
					.then(data => {
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.signature, // 必填，签名，见附录1
							jsApiList: [
								'checkJsApi',
								'startRecord',
								'stopRecord',
								'updateAppMessageShareData',
								'chooseImage',
								'translateVoice',
								'scanQRCode', // 微信扫一扫接口
								'chooseWXPay'
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						})

						wx.error(function(res) {
							alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
						});
					})
			},

			getUrlParam(name) {
				let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				let url = window.location.href.split('#')[0]
				let search = url.split('?')[1]
				if (search) {
					let r = search.substr(0).match(reg)
					if (r !== null) return unescape(r[2])
					return null
				} else {
					return null
				}
			}
		}

	}
</script>

<style>
	.content {
		background: #377EB4;
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		height: 20vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100upx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.loginBtn {
		width: 50%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 70px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>